<template>
  <div id="right-list">
    <div class="box">
      <p>报警车辆列表</p>
      <DataLoading class="center-position" v-if="warnList === null"/>
      <EasyScrollbar :barOption="listBar">
        <div class="noInfor" v-if="warnList !== null && warnList.length === 0">
          暂无报警信息
        </div>
        <ul v-if="warnList !== null && warnList.length > 0">
          <div v-if="isNewList !=null && isNewList.length == 0">
            暂无报警信息
          </div>
          <template v-for="item in warnList">
            <WarnList :warn ="item" @clickEvent="pointToAlarm"></WarnList>
          </template>
        </ul>
      </EasyScrollbar>
    </div>
    <!--<div class="box">
      <p>应急案件列表</p>
      <DataLoading class="center-position" v-if="caseList === null"/>
      <EasyScrollbar :barOption="listBar">
        <div class="noInfor" v-if="caseList !== null && caseList.length === 0">
          暂无应急信息
        </div>
        <ul v-if="caseList !== null && caseList.length > 0">
          <div v-if="isNewCaseList!=null && isNewCaseList.length == 0">
          </div>
          <template v-for="item in caseList">
            <CaseList :caseLi ="item" @clickEvent="pointToAlarm"></CaseList>
          </template>
        </ul>
      </EasyScrollbar>
    </div>-->
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import WarnList from '../sub-home/warnList.vue'
  import CaseList from '../sub-home/caseList.vue'
  import DataLoading from './dataLoading.vue'
  export default {
    name: 'RightList',
    data () {
      return {
        listBar: {
          barColor: "#26a2d6",   //滚动条颜色
          barWidth: 4,           //滚动条宽度
          railColor: "#405569",     //导轨颜色
          barMarginRight: 6,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.4,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        },
        isNewList:this.warnList,  //暂无数据  字的显示
        isNewCaseList:this.caseList
      }
    },
    mounted(){
      this.isShowNodata();
      this.isShowCaseNodata();
    },
    props:[
      'warnList',
      'caseList'
    ],
    components:{
      WarnList,
      CaseList,
      DataLoading,
    },
    computed: {
      ...mapGetters(['alarmInfo','car_type']),
    },
    watch:{
     car_type(newVal, oldVal) {
       if (newVal !== oldVal) {
         this.isShowNodata();
         this.isShowCaseNodata();
       }
     }
    },
    methods:{
      ...mapMutations(['updateAlarmInfo','updateHomeState']),
      pointToAlarm(data){
        let coordinate = [data.lon,data.lat];
        this.updateHomeState('alarm_info');
        this.updateAlarmInfo({
          carType:data.carType,
          id:data.id,
          time:data.time,
          lat:data.lat,
          lon:data.lon,
          type:data.type
        });
      },
      isShowNodata: function () {
        if(this.warnList !== null && this.warnList.length>0){
          this.isNewList = [];
          if(this.car_type.type == 0){
            this.isNewList = this.warnList
          }
          this.warnList.forEach((item, index)=> {
            if(item.carType === this.car_type.type){
              this.isNewList.push(item)
            }
          });
        }
      },
      isShowCaseNodata: function () {
        if(this.caseList !== null && this.caseList.length>0){
          this.isNewCaseList = [];
          if(this.car_type.type == 0){
            this.isNewCaseList = this.caseList
          }
          this.caseList.forEach((item, index)=> {
            if(item.carType === this.car_type.type){
              this.isNewCaseList.push(item)
            }
          });
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";

  #right-list {
    pointer-events: auto;
    position: absolute;
    right: 0;
    top: 80px;
    width: 340px;
    height: calc(100% - 80px);
    @include borderBlur;
    .box{
      min-height: 300px;
      height: 100%;
      position: relative;
      &>p{
        margin: 0;
        @include linearTitle;
      }
      .center-position {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%);
      }
      ul{
        margin: 0;
        padding-left: 0;
        padding-top: 15px;
        height: 900px;
        list-style: none;
        box-sizing: border-box;

      }
      .noInfor{
        margin-top: 14px;
      }
    }
  }

</style>
